
/* Shorten with an ellipsis when overflowing */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.Editor-suggestionsBody .TransUnit--suggestion .TransUnit-text--tight {
    padding-top: 0 !important;
    font-size: 1rem;
}

.TransUnit--suggestion .TransUnit-text--tight {
    padding-top: 40px !important;
    font-size: 1.2rem;
}
/* Based on bootstrap styles. */

:root {
    --brand-secondary: #03A6D7;
    --brand-primary:   #546677;
    --brand-info:      #00A5D9;
    --brand-success:   #62c876;
    --border-radius-base:       4px;
    --border-radius-small:      3px;
    --padding-base-vertical:    8px;
    --padding-small-horizontal: 10px;
    --padding-large-vertical:   14px;
}

.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

.panel-group {
    margin-bottom: 1.429rem;
}

.panel-group .panel {
    margin-bottom: 0;
    border-radius: var(--border-radius-base);
}

.panel-group .panel + .panel {
    margin-top: 0.357rem;
}

.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-group .panel-heading + .panel-collapse > .list-group,
.panel-group .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #ddd;
}

.panel-group .panel-footer {
    border-top: 0;
}

.panel-group .panel-footer + .panel-collapse .panel-body {
    border-bottom: 1px solid #ddd;
}

.panel {
    margin-bottom: 1.429rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius-base);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    background-color: #fcfcfc;
    line-height: 1.2rem;
}

.panel-body {
    padding: var(--padding-large-vertical);
    color: var(--brand-primary);
    font-size: 1rem;
}

.panel-body h3 {
    margin-top:0;
}

.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    color: inherit;
    font-size: 1.143rem;
    padding-bottom: 0;
}

.panel.panel-side {
    padding: var(--padding-base-vertical);
    border: solid 1px #ddd !important;
    background-color: #fff !important;
}

.panel-heading {
    padding:8px !important;
    border-bottom: 1px solid transparent;
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    font-size: 1.1rem !important;
    font-weight: 600;
    color: var(--brand-secondary);
    background-color: #fff;
}

.panel-heading .TransUnit-details {
  line-height: 1.2rem;
}

.panel-info > .panel-heading {
    border-bottom: solid 1px var(--brand-info);
    color: var(--brand-info);
    background-color: #fcfcfc;
    font-weight: 300;
}

.panel-title > .small,
.panel-title > .small > a,
.panel-title > a,
.panel-title > small,
.panel-title > small > a {
    color: inherit;
}

.collapse {
    display: none;
}

.collapse.in {
    display: block;
}

.collapsing {
    position: relative;
    overflow: hidden;
    height: 0;
    -webkit-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    -webkit-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility;
}

.Z\(modal\) {
    z-index: 1000 !important;
}

.label-primary {
    background-color: #337ab7;
}

.label-success {
    background-color: var(--brand-success);
}

.label-info {
    background-color: var(--brand-info);
}

.TransUnit-sourceHeading {
    padding-left: 1.1rem;
    top: inherit;
    line-height: 3rem;
    font-weight: 600;
    color: var(--brand-primary);
}

.TransUnit-targetHeading {
    padding-left: 1.9rem;
    top: inherit;
    line-height: 3rem;
    font-weight: 600;
    color: var(--brand-primary);
}

.modal-conten .label {
    font-size: 70%;
    font-weight: 600;
    display: inline;
    padding: 0.2rem 0.6rem 0.3rem;
    text-align: center;
    vertical-align: super;
    white-space: nowrap;
    color: #fff;
    border-radius: 0.25rem;
}

.TransUnit-details {
    white-space: normal;
    word-break: break-all;
    line-height: 1rem;
    color: var(--brand-primary);
}

.TransUnit-details .u-listInline {
    display: block;
    width: 100%;
}

li.TransUnit-label-suggestions {
    margin-bottom: 0.375rem;
}

span.TransUnit-details-inner {
    padding-left: 0.375rem;
    font-weight: 500;
    color: #444c54;
}


@media (max-width: 740px) {
  .TransUnit-sourceHeading {
    padding-left: 2.1rem;
  }

  .TransUnit--suggestion .TransUnit-text--tight {
    padding-top: 0 !important;
    font-size: 1.2rem;
  }
}
